<template>
  <view class="good_detail_container">
    <u-navbar
      :autoBack="true"
      bgColor="transparent"
      height="80rpx"
      leftIconSize="40rpx"
    >
    </u-navbar>

    <view class="swiper_container">
      <view class="indicator_view">
        <text class="text">{{ indicatorValue }}/{{ goodsImage.length }}</text>
      </view>
      <u-swiper
        height="100%"
        width="100%"
        keyName="img"
        :autoplay="false"
        :list="goodsImage"
        @change="swiperChange"
      ></u-swiper>
      <!-- imgMode="aspectFit" -->
    </view>

    <!-- <movable-area style="width: 100%">
      <movable-view
        style="width: 100%; height: fit-content"
        :x="movableData.x"
        :y="movableData.y"
        inertia
        direction="vertical"
        @change="movableChange"
      >
      </movable-view>
    </movable-area> -->
    <view class="movable_container">
      <Card>
        <view class="card_view_info">
          <Money>39.9</Money>
          <view class="good_title">
            商品名称商品名称商品名称商品名称商品名称商品名称
          </view>
          <view class="special_view">
            <text class="special">特价</text>
          </view>
        </view>
      </Card>
      <Card>
        <view class="card_view_norm">
          <text class="title">规格</text>
          <text class="norm">褐色/L</text>
          <u-icon name="arrow-right" size="30"></u-icon>
        </view>
      </Card>
      <Card>
        <view class="card_view_content">
          <view class="title">规格信息</view>
          <view class="table_view">
            <view class="table_cell">
              <view class="label">产地</view>
              <view class="content"> 内功啊手动滑稽阿斯利康很大 </view>
            </view>
            <view class="table_cell">
              <view class="label">产地</view>
              <view class="content"> 内功啊手动滑稽阿斯利康很大 </view>
            </view>
            <view class="table_cell">
              <view class="label">产地</view>
              <view class="content"> 内功啊手动滑稽阿斯利康很大 </view>
            </view>
          </view>
        </view>
      </Card>
      <Card>
        <view class="card_other"> </view>
      </Card>
    </view>

    <view class="hanlder_view">
      <up-button
        class="btn"
        plain
        :hairline="false"
        color="#eb5757"
        text="加入购物车"
        style="margin-right: 30rpx"
        shape="circle"
      ></up-button>
      <up-button
        class="btn"
        :hairline="false"
        color="#eb5757"
        text="立即购买"
        shape="circle"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
import Card from "@/component/Card.vue";
import Money from "@/component/Money.vue";
import A1 from "@/assets/test/1.png";
import A2 from "@/assets/test/2.png";

const indicatorValue = ref(1);
const movableData = reactive({
  x: 0,
  y: 0,
});

const goodsImage = ref([
  {
    id: 1,
    img: A1,
  },
  {
    id: 2,
    img: A2,
  },
]);

// 拖动触发

function movableChange(data) {
  console.log(data);
}
// 轮播图切换
function swiperChange(data) {
  const { current } = data;
  indicatorValue.value = current + 1;
}
</script>

<style lang="scss" scoped>
.special {
  height: fit-content;
  width: fit-content;
  display: inline-block;
  border-radius: 2px;
  padding: 2px;
  font-weight: 400;
  font-size: 18rpx;
  color: #333333;
  line-height: 21rpx;
  border: 1rpx solid #333333;
  margin-right: 10rpx;
}
.good_detail_container {
  // height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #f8f9fa;

  .hanlder_view {
    position: fixed;
    bottom: var(--window-bottom, 0);
    z-index: 5;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    height: 150rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    justify-content: space-between;
    border-top: 1px solid #fafafa;
  }

  .movable_container {
    width: 100%;
    padding: 0 20rpx;
    padding-bottom: 180rpx;
    margin-top: -30rpx;
    position: relative;
    z-index: 2;


    .card_other {
      height: 500rpx;
      background-color: #eee;
    }
    .card_view_content {
      .table_view {
        border: 1px solid #ededed;
        .table_cell {
          display: flex;
          align-items: stretch;
          justify-content: flex-start;
          border-bottom: 1px solid #ededed;
          &:last-child {
            border: none;
          }
          .label {
            font-size: 24rpx;
            color: #666666;
            padding: 10rpx 0;
            border-right: 1px solid #ededed;
            width: 156rpx;
            flex-grow: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background-color: #f8f9fa;
            font-family: pfr;
          }
          .content {
            flex: 1 0 0;
            padding: 10rpx 30rpx;

            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }
      .title {
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        margin-right: 16rpx;
        font-family: pfs;
        margin-bottom: 24rpx;
      }
    }
    .card_view_norm {
      background-color: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        margin-right: 16rpx;
        font-family: pfs;
      }
      .norm {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        margin-left: 0;
        margin-right: auto;
        font-family: pfr;
      }
    }
    .card_view_info {
      overflow: hidden;
      .special_view {
        line-height: 1;
      }
      .good_title {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
        line-height: 42rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        margin-top: 10rpx;
        margin-bottom: 15rpx;
      }
    }
  }
  .swiper_container {
    width: 100%;
    height: 840rpx;
    // position: fixed;
    // top: 0;
    // left: 0;
    // right: 0;
    // width: 100%;
    // z-index: 5;
    position: relative;
    .indicator_view {
      position: absolute;
      z-index: 1;
      right: 30rpx;
      bottom: 60rpx;
      width: 78rpx;
      height: 40rpx;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 15px;
      opacity: 0.5;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      .text {
        font-weight: 400;
        color: #ffffff;
        line-height: 10rpx;
        font-size: 22rpx;
        vertical-align: middle;
      }
    }
  }
}
</style>
